
<template>
	<u-popup
	    :show="show"
	    mode="bottom"
	    @close="closeHandler"
	    :safeAreaInsetBottom="safeAreaInsetBottom"
	    :round="round"
	>
	<view class="header">
		<text class="header__title u-line-1">增值服务</text>
		<view class="header__icon-wrap" @tap.stop="cancel">
			<u-icon name="close" size="17" color="#c8c9cc" bold ></u-icon>
		</view>
	</view>
	<u-swipe-action v-if="actions" class="order">
		<u-swipe-action-item v-for="(item, index) in actions" :key="index" :show="item.show" :index="index" @click="deleterecord0">
		  <view class="item">
			  <view class="left">
			  	<view class="t32 c-primary tbold">{{item.name}}</view>
			  	<view class="t28 c-content">{{item.desc}}</view>
			  </view>
			  <view class="right">
			  	<u-image :src="item.pic" mode="aspectFill"  radius="16rpx" width="180rpx" height="180rpx"></u-image>
			  </view>
			  <u-checkbox activeColor="red" shape="circle" :checked="item.show" class="p32"></u-checkbox>
		  </view>
		</u-swipe-action-item>
	</u-swipe-action>
	<view  class="submit">
		<u-button type="success" @click="selectHandler">确定</u-button>
	</view>
</u-popup>
</template>

<script>
	export default {
		name: "bottom-valueadd",
		data() {
			return {
				actions: [{
					pic:"/static/images/ic_menu2.png",
					name:"木质包装",
					desc:"为您提供打木架服务，保护您的商品避免损坏",
					price:1,
					show:true,
				},
				{
					pic:"/static/images/ic_menu3.png",
					name:"包装服务",
					desc:"为您提供打木架服务，保护您的商品避免损坏",
					price:1,
					show:false,
				}],
				show: true
			}
		},
		computed: {

		},
		methods: {
			closeHandler() {
				// 允许点击遮罩关闭时，才发出close事件
				if(this.closeOnClickOverlay) {
					this.$emit('close')
				}
			},
			// 点击取消按钮
			cancel() {
				this.$emit('close')
			},
			selectHandler() {
				this.$emit('select', this.actions)
				if (this.closeOnClickAction) {
					this.$emit('close')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  padding: 12px 30px;
  .header__title {
	font-size: 16px;
	color: #303133;
	font-weight: bold;
	text-align: center;
  }
  .header__icon-wrap {
	position: absolute;
	right: 15px;
	top: 15px;
  }
}
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.item {
		display: flex;
		margin: 20rpx 0 0;
		padding: 20rpx;
		border-radius: 5px;
		border: 1px solid #D1D1D1;
		.left {
			margin: 20rpx;
			justify-content: center;
		}


		.right {
			margin-left: 10rpx;
			text-align: right;
		}
	}
}
.submit {
	margin: 32rpx;
}
</style>